<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 用户信息卡片</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<h2  >用户信息卡片</h2>

<div class="card">
    <img  src="https://static.runoob.com/images/mix/img_avatar.png" alt="John" >
    <div class="container">
        <h1>John Doe</h1>
        <p class="title">CEO & Founder, Example</p>
        <p>Harvard University</p>
        <div style="margin: 24px 0">
            <a href="#"><i class="fa fa-dribbble"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-linkedin"></i></a>
            <a href="#"><i class="fa fa-facebook"></i></a>
        </div>
        <p><button>Contact</button></p>
    </div>
</div>
<style>
    img{
        width: 100%;
    }
    body{
        text-align: center;
    }
    .card{
        max-width: 300px;
        margin: auto;

    }

    .container {

    }



</style>
</body>
</html>
